﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DomainLimit.aspx.cs" Inherits="famails.BackEnd.page.DomainLimit" MasterPageFile="~/Master.Master" %>

<asp:content id="Content1" contentplaceholderid="ContentPlaceHolder1" runat="Server">
<div style="width:100%;padding:10px;">
<!--start content 01-->
    <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="border:1px solid #333;margin-bottom:10px;padding:0px;">
        <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="padding:10px 20px;background:#000;color:#fff;font-size:18px;font-weight:bold;position:relative;">   
            Thống kê vi phạm
        </div>
        <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="height: auto;padding:10px;">
            <fieldset style="padding:5px 0px;border-bottom:1px solid #ccc;">
                <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12" style="padding:5px;padding-left:0px;">
                    <span for="simple-input" style="font-weight: bolder;font-size:18px;text-transform: none">Hạn mức cảnh báo</span>
                </div>
                
                <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12" style="padding:0px;padding-left:0px;">
                    <div class="col-md-3 col-lg-3 col-sm-3 col-xs-6" style="padding:5px;line-height:30px;">Số email gửi dưới</div>
                    <div class="col-md-3 col-lg-3 col-sm-3 col-xs-6" style="padding:5px;"><asp:TextBox runat="server" CssClass="form-control" style="border-radius:0px;border:1px solid #333;" id="txtWarningFrom"></asp:TextBox></div>
                    <div class="col-md-3 col-lg-3 col-sm-3 col-xs-6" style="padding:5px;line-height:30px;">Tỷ lệ email chết</div>
                    <div class="col-md-3 col-lg-3 col-sm-3 col-xs-6" style="padding:5px;"><asp:TextBox runat="server" CssClass="form-control" style="border-radius:0px;border:1px solid #333;"  id="txtWarningRatio"></asp:TextBox></div>
                </div>
            </fieldset>
            <fieldset style="padding:5px 0px;border-bottom:1px solid #ccc;">
                <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12" style="padding:5px;padding-left:0px;">
                    <span for="simple-input" style="font-weight: bolder;font-size:18px;text-transform: none">Hạn mức khóa tài khoản</span>
                </div>
                
                <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12" style="padding:0px;padding-left:0px;">
                    <div class="col-md-3 col-lg-3 col-sm-3 col-xs-6" style="padding:5px;line-height:30px;">Số email gửi từ</div>
                    <div class="col-md-3 col-lg-3 col-sm-3 col-xs-6" style="padding:5px;"><asp:TextBox runat="server" CssClass="form-control" style="border-radius:0px;border:1px solid #333;" id="txtBanFrom"></asp:TextBox></div>
                    <div class="col-md-3 col-lg-3 col-sm-3 col-xs-6" style="padding:5px;line-height:30px;">Tỷ lệ email chết</div>
                    <div class="col-md-3 col-lg-3 col-sm-3 col-xs-6" style="padding:5px;"><asp:TextBox runat="server" CssClass="form-control" style="border-radius:0px;border:1px solid #333;"  id="txtBanRatio"></asp:TextBox></div>
                </div>
            </fieldset>
            <fieldset style="padding:5px 0px;">
                <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12" style="padding:5px;padding-left:0px;text-align:right">
<%--                    <asp:Button id="btnSave" runat="server" style="background:#333;color:#fff;text-align:center;padding:6px 15px;border-radius:0px;border:0px;" text="Cập nhật">
                          
                        </asp:Button>--%>
                    <button runat="server" id="btnSave" style="background:#333;color:#fff;text-align:center;padding:6px 15px;border-radius:0px;border:0px;" class="btn">
                        <span style="margin-right:10px;" class="fa fa-upload"></span> Cập nhật
                    </button> 

                </div>
            </fieldset>
        </div>
    </div>
    <style>
                    #contentjqxgrid {
                        width:100% !important;
                    }
                    #pagerjqxgrid {
                        width:100% !important;
                    }
                </style>
    <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="border:1px solid #333;margin-bottom:10px;padding:0px;" id="tblList">
        <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="padding:10px 20px;background:#000;color:#fff;font-size:18px;font-weight:bold;position:relative;">   
            Danh sách tên miền
        </div>
        <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="height: auto;padding:10px;">
            <fieldset>
                <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12" style="padding:5px;padding-left:0px;">
                    <span for="simple-input" style="font-weight: bolder;font-size:18px;text-transform: none">Hạn mức cảnh báo</span>
                </div>
                
                <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12" style="padding:0px;padding-left:0px;">
                    <div class="col-md-3 col-lg-3 col-sm-3 col-xs-8" style="padding:5px;line-height:30px;">Số lượng email gần nhất: </div>
                    <div class="col-md-3 col-lg-3 col-sm-3 col-xs-4" style="padding:5px;"><input type="text" id="txtTop" class="form-control" style="border-radius:0px;border:1px solid #333;" value="10000"/></div>
                    <div class="col-md-3 col-lg-3 col-sm-3 col-xs-8" style="padding:5px;line-height:30px;">Tên domain: </div>
                    <div class="col-md-3 col-lg-3 col-sm-3 col-xs-4" style="padding:5px;"><input id="txtDomain" class="form-control" style="border-radius:0px;border:1px solid #333;" type="text" /></div>
                </div>
                <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12" style="padding:0px;padding-top:10px;">
                    <div class="col-md-2 col-lg-2 col-sm-4 col-xs-4" style="padding:5px;padding-left:0px;">
                        <label for="simple-input" style="line-height:30px;font-weight: bolder;padding-left:10px ;text-transform: none">Từ ngày</label>
                    </div>
                
                    <div class="col-md-2 col-lg-2 col-sm-8 col-xs-8" style="padding:5px;padding-left:0px;">
                        <div id="txtFromDate"></div>
                    </div>
                    <div class="col-md-2 col-lg-2 col-sm-4 col-xs-4" style="padding:5px;padding-left:0px;">
                        <label for="simple-input" style="line-height:30px;padding-left:10px ;font-weight: bolder; text-transform: none">Đến ngày</label>
                    </div>
                    <div class="col-md-2 col-lg-2 col-sm-8 col-xs-8" style="height:34px;padding:5px;padding-left:0px;">
                         <div id="txtToDate"></div>
                    </div>
                    <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12" style="padding:5px;padding-left:0px;text-align:center;">
<%--                        <asp:LinkButton id="btnSearch" style="padding:7px 13px;text-align:center;background:#333;color:#fff;font-weight:bold;border-radius:0px;" class="btn">
                            <span style="margin-right:10px;" class="fa fa-search"></span> Tìm kiếm
                        </asp:LinkButton>--%>
                        <asp:Button ID="btnSearch" style="padding:6px 13px;text-align:center;background:#333;color:#fff;font-weight:bold;border-radius:0px;" class="btn">
                            <span style="margin-right:10px;" class="fa fa-search"></span> Tìm kiếm
                        </asp:Button>
                    </div>
                    <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12" style="padding:5px;padding-left:0px;">
                        <div id='jqxWidget' style="width:100% !important;font-size: 13px; font-family: Verdana; float: left;">
                            <div id="jqxgrid" style="width:100% !important;"></div>
                        </div>
                        <div id='chartContainer' style="width:100% !important;width: 100%;height:600px;"></div>
                        <!-- Biểu đồ Google -->
                        

                    </div>
                    <%--<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12" style="padding:5px;padding-left:0px;">
                        <div id="chart_div" class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="width: 100%; height: 500px;"></div>
                    </div>--%>
                </div>
            </fieldset>
        </div>
    </div>
</div>
<style>
    #tblChart {
        border:0px solid #fff;
    }
</style>    

<!-- Cấu hình biểu đồ google -->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        /*google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            var data = google.visualization.arrayToDataTable([
        ['Genre', 'Thành công', 'Trả về', 'Lỗi', { role: 'annotation' }],
        ['betraining.org', 40, 10, 50, ''],
        ['famails.com', 100, 0, 0, ''],
        ['chomy.com.vn', 95, 2, 3, ''],
            ]);

            var options = {
                width:'100%',
                height: 400,
                legend: { position: 'top', maxLines: 3 },
                bar: { groupWidth: '20%' },
                fontSize: 12,
                isStacked: true,
            };

            var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        }*/
    </script>
<!-- End -->

        <script type="text/javascript">
             
            jQuery(function ($) {

                $("#txtFromDate").jqxDateTimeInput({ width: '150px', height: '25px' });
                $("#txtToDate").jqxDateTimeInput({ width: '150px', height: '25px' });
                //$("#txtTop").jqxNumberInput({ width: '150px', height: '25px' });

                $("#btnSearch").click(function () {
                    var linkrenderer = function (row, column, value) {

                        var html = "<div id='jqxProgressBar_B_" + value + "' value='" + value + "'></div>";
                        return html;
                    }

                    $("#jqxgrid").jqxGrid('showloadelement');
                    var postValue = "{domain:'" + $('#txtDomain').val() + "',from:'" + $('#txtFromDate').jqxDateTimeInput('getText') + "',to:'" + $('#txtToDate').jqxDateTimeInput('getText') + "',top:" + $('#txtTop').val() + "}";
                    //alert(postValue);
                    $.ajax({
                        type: "POST",
                        url: "DomainLimit.aspx/Search",
                        data: postValue,
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (data) {
                            var settings = {
                                 //width: $('#tblList').width(),
                                 title: "Domain Send Result",
                                 description: "Tỷ lệ gửi email của các domain",
                                 enableAnimations: true,
                                 showBorderLine: false,
                                 legendLayout: { width: 300},
                                 showLegend: true,
                                 padding: { left: 5, top: 5, right: 5, bottom: 5 },
                                 titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                                 source: data.d,
                                 categoryAxis:
                                     {
                                         text: 'Category Axis',
                                         textRotationAngle: 0,
                                         dataField: 'DomainName',
                                         showTickMarks: true,
                                         tickMarksInterval: 1,
                                         tickMarksColor: '#888888',
                                         unitInterval: 1,
                                         showGridLines: true,
                                         line: 10,
                                         gridLinesInterval: 1,
                                         gridLinesColor: '#888888',
                                         axisSize: 'auto',
                                         textRotationAngle: -45
                                     },
                                 colorScheme: 'scheme06',
                                 seriesGroups:
                                     [
                                         {
                                             type: 'stackedcolumn100',
                                             columnsGapPercent: 100,
                                             seriesGapPercent: 5,
                                             //lineWidth: 15,
                                             //greyScale:true,
                                             valueAxis:
                                             {
                                                 unitInterval: 10,
                                                 minValue: 0,
                                                 maxValue: 100,
                                                 displayValueAxis: true,
                                                 description: 'Tỷ lệ',
                                                 axisSize: 'auto',
                                                 textOffset :'{x:50,y:2}',
                                                 tickMarksColor: '#888888'
                                             },
                                             series: [
                                                     { dataField: 'BouncePer', displayText: 'Trả về' ,columnWidth:50},
                                                     { dataField: 'ErrorPer', displayText: 'Lỗi', columnWidth: 50 },
                                                     { dataField: 'DeliveryPer', displayText: 'Thành công', columnWidth: 50 }
                                             ]
                                         }
                                     ]
                             };
                             // setup the chart
                             $('#chartContainer').jqxChart(settings);
                           /* alert(data.d);
                            google.load("visualization", "1", { packages: ["corechart"] });
                            //google.setOnLoadCallback(drawChart);
                            //function drawChart() {
                            var data = new google.visualization.DataTable(data.d);
                            var options = {
                                width: '100%',
                                height: 400,
                                legend: { position: 'top', maxLines: 3 },
                                bar: { groupWidth: '20%' },
                                fontSize: 12,
                                isStacked: true,
                            };

                            var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
                            chart.draw(data, options);*/
                        //}
                           var source =
                    {
                        datatype: "json",
                        datafields: [
                            { name: 'DomainName', type: 'string' },
                            { name: 'TotalSend', type: 'decimal' },
                            { name: 'TotalDelivery', type: 'decimal' },
                            { name: 'DeliveryPer', type: 'double' },
                            { name: 'TotalError', type: 'decimal' },
                            { name: 'ErrorPer', type: 'double' },
                            { name: 'TotalBounce', type: 'decimal' },
                            { name: 'BouncePer', type: 'double' }
                        ],
                        id: 'Id',
                        localdata: data,
                        pager: function (pagenum, pagesize, oldpagenum) {
                        }
                    };
                            var dataAdapter = new $.jqx.dataAdapter(source);
                            $("#jqxgrid").jqxGrid(
                            {
                                width: $('#jqxWidget').width(),
                                source: dataAdapter,
                                sortable: true,
                                pageable: true,
                                autoheight: true,
                                columnsresize: true,
                                columns: [
                                  { text: 'Domain', datafield: 'DomainName' },
                                  { text: 'Tổng gửi', datafield: 'TotalSend', cellsformat: 'number' },
                                  { text: 'Gửi thành công', datafield: 'TotalDelivery', cellsformat: 'number' },
                                  { text: 'Lỗi', datafield: 'TotalError', cellsformat: 'number' },
                                  { text: 'Trả về', datafield: 'TotalBounce', cellsformat: 'number' }
                                ]
                            });
                        }
                    });
                });
                $('#btnSearch').trigger('click');
            });
        </script>
</asp:content>
